// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]
//获取元素
/* 需求一：遍历数组 apiTypeData，把name属性值组装成html代码，再把组装好的数据渲染到 apiKinds中 */
let apiKindsNav = document.querySelector('.apiKinds .nav')
//console.log(apiKindsNav);
function renderApiData() {
    //保存组装好的数据
    let apiHtml = '';
    apiTypeData.forEach(function (v) {
        //console.log(v);
        //拼装数据
        apiHtml += `
        <a href="#" class="${v.isnew ? 'bold' : ''}" 
        data-keyword="${v.keyword}">${v.name}</a>
    `
        /* if(v.isnew){
            //拼装数据
            apiHtml +=`
                <a href="#" class="bold">${v.name}</a>
            `
        }else{
            apiHtml +=`
                <a href="#">${v.name}</a>
            `
        } */
    })
    //将组装好的数据渲染到 apiKindsNav 中
    apiKindsNav.innerHTML = apiHtml
    // console.log(apiHtml);
}
renderApiData();


/* 需求二：利用事件委派，给 apiKindsNav 注册点击事件 ，将当前事件源的文本渲染到 search-icon */
/* 截取当前事件源的自定义属性 keyword，渲染给 search-text  */
//获取元素
let searchIcon = document.querySelector('.search-icon')//对应文字框
let searchText = document.querySelector('.search-text')//对应input搜索框
apiKindsNav.addEventListener('click', function (e) {
    //console.log(1);
    //筛选出事件源：筛选出触发事件的标签对象
    if (e.target.nodeName === 'A') {
        searchIcon.textContent = e.target.textContent;
        // console.log(e.target);

        //获取当前事件源的自定义属性 data-keyword  渲染到 search-text
        searchText.placeholder = e.target.dataset.keyword;
        //console.log(searchText.placeholder);
        /* let keyword =  e.target.dataset.keyword
        console.log(keyword); */

    }
})


/**
 * 3.模拟api列表数据
 */

//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]

/* 
  需求：先遍历 listDataArr,组装成HTML代码，并渲染到页面中
*/
//获取元素
let apiList = document.querySelector('.api-list')
//console.log(apiList);
//封装函数
function renderListData() {
    //定义变量保存html代码
    let listDataHtml = '';
    //先遍历
    listDataArr.forEach(function (v) {
        //组装数据
        listDataHtml += `
    <li>
        <span class="enterprise ${v.isSpecial ? 'isShow' : ''}">企业专用</span>
        <a href="../page/apidetails.html" class="api-content">
            <img src="../imgs/${v.img}" alt="">
            <p class="mt18 go-out">${v.name}</p>
            <p class="${v.price === '免费' ? 'green' : 'red'}">${v.price}</p>
        </a>
        <p class="api-apply">申请数据</p>
    </li> 
    `
    })
    //console.log(listDataHtml);
    //渲染到页面api-list中
    apiList.innerHTML = listDataHtml
}
renderListData();



  /**
 * 5.需求: 点击api-apply,显示蒙层mantle
 */
let mantle = document.querySelector('.mantle')
apiList.addEventListener('click', function (e) {
  //筛选出事件源: 按钮api-apply
  if (e.target.className === 'api-apply') {
    mantle.style.display = 'block'
  };
})


/**
 * 6.需求: 点击mantle,隐藏自己
 */
mantle.addEventListener('click', function () {
  mantle.style.display = 'none'
})
/**
 * 7.需求: 点击modal,阻止事件传播(事件冒泡)
 */
 let modal = document.querySelector('.modal')
 modal.addEventListener('click', function (e) {
   e.stopPropagation();
 })


 /**
 * 7.需求: 鼠标移入菜单(toggle-login a)
 *         为当前菜单添加激活样式
 *         显示当前菜单对应的内容(login-box box01)
 */

tabCard('.toggle-login a', '.login-box .box01')

/* 
    验证账号登录  用户名/手机号/邮箱  密码  如果成功点击登录按钮提交到首页 home.html
*/
//获取元素
let userName = document.querySelector('#username')//用户名
let userBtn = document.querySelector('.user-btn')//用户名图标
let tNameSpan = document.querySelector('.test .name-alert')//用户名图标
//console.log(userBtn);
let password = document.querySelector('#password')//密码
let pwdBtn = document.querySelector('.pwd-btn')//密码图标
let tPwdSpan = document.querySelector('.test .pwd-alert')//密码图标
//console.log(pwdBtn);
let testBtn = document.querySelector('#test-btn')//登录

// 输入用户名手机号验证内容是否大于0，显示背景图 loginIcon.png 否则隐藏
userName.addEventListener('input',function(){
    //判断用户值是否大于0
    //console.log(1);
    if(userName.value > 0){
        userBtn.style.display = 'block' //显示
    }else{
        userBtn.style.display = 'none' //隐藏
    }
})

// 点击用户名图标 清空内容
userBtn.addEventListener('click',function(){
    userName.value = ''
})
// 点击密码图标 清空内容
pwdBtn.addEventListener('click',function(){
    password.value = ''
})

//判断输入的密码大于0显示图标，否则隐藏图标
password.addEventListener('keyup',function(){
    //console.log(1);
    if(password.value >0){
        pwdBtn.style.display = 'block' //显示
    }else{
        pwdBtn.style.display = 'none' //隐藏
    }
})
/* 定义正则表达式 */
    //验证手机号码是否合法
    let userReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
    //创建密码验证——正则表达式
    let pwdReg = /^[0-9]{6}$/ //6位数字

/* 
    手机号失去焦点时 blur，验证手机号是否合适 //使用正则表达式
*/

userName.addEventListener('blur',function(){
    //用 userReg 验证手机号是否合法
    let bool = userReg.test(userName.value)
    //console.log(bool);
    if (bool) {
        //提示内容为空
        tNameSpan.textContent = ''
    } else {
        //提示内容为 
        tNameSpan.textContent = '请输入正确的手机号码'
    }
})

/* 
    密码失去焦点时，验证手机号是否合适
*/
password.addEventListener('blur', function () {
    //用 userMsg 验证内容是否合法
    let bool = pwdReg.test(password.value)
    //console.log(bool);
    if (bool) {
        //提示内容为空
        tPwdSpan.textContent = ''
    } else {
        //提示内容为 
        tPwdSpan.textContent = '请输入6位数字的密码'
    }
})

//点击登录按钮  验证手机密码是否合格
testBtn.addEventListener('click',function(){
    //验证用户名
    // console.log(1);
    if(!userReg.test(userName.value)){
        //提示内容为 
        tNameSpan.textContent = '请输入正确的手机号码'
    }else if(!pwdReg.test(password.value)){
        //提示内容为 
        tPwdSpan.textContent = '请输入6位数字的密码'
    }else{
        textContent = '登录成功'
        location.href = '../page/home.html'
    }
    

})







